<template>
	<view>
		<view>
			<!-- 轮播导航栏 -->
			<scroll-view class="scroll-view_H" scroll-x>
				<view id="demo1" class="scroll-view-item_H uni-bg-red" :class="cid==item.id?'active':''"
					v-for="(item, index) in scrollList" :key="item.id" @click="getChangeNewList(item.id)">
					{{item.classname}}
				</view>
			</scroll-view>
		</view>
		<view class="newlist" v-for="item in newList" :key="item.id">
			<!-- 新闻列表 -->
			<newsbox :item="item" @click.native="getNewDeatail(item)"></newsbox>
		</view>
		<!-- 无新闻列表显示空 -->
		<view class="nodata" v-if="!newList.length">
			<image src="../../static/images/nodata.png" mode="widthFix"></image>
		</view>
		<!-- 加载数据 -->
		<view class="loading" v-if="loading && newList.length">
			数据加载完毕
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollList: [],
				newList: [],
				cid: 50, //标题栏默认50 第一个
				page: 1,
				loading: 0, //数据是否到底 0默认加载 1到底

			}
		},
		created() {
			this.getScroll()
			this.getNewList()
		},
		// 向上滑动触底加载
		onReachBottom() {
			console.log("到底部了")
			console.log(this.newList)
			// this.cid = this.newList.data.classid
			this.page++
			console.log(this.cid, this.page)
			// this.getNewList(this.cid)
			this.getNewList()
			// if (this.loading == 2) {
			// 	return;
			// }
			// this.currentPage++;
			// this.loading = 1;
			// this.getNewsData();
		},

		methods: {
			// 获取新闻导航
			getScroll() {
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/navlist.php",
					success: res => {
						// console.log(res.data)
						this.scrollList = res.data
					}
				})
			},
			// 获取新闻列表
			getNewList() {
				this.loading = 0
				console.log(this.cid)
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/newslist.php",
					data: {
						cid: this.cid,
						num: 7,
						page: this.page,
					},
					success: res => {
						console.log(res)
						if (res.data.length === 0) this.loading = 1
						this.newList = [...this.newList, ...res.data]
						console.log(this.newList)
					}
				})
			},
			// 切换获取新闻列表
			getChangeNewList(e) {
				console.log(e, this.cid)
				this.page = 1
				this.cid = e
				this.newList = []
				console.log(this.cid)
				this.getNewList()
			},
			//跳转详情页并传递id
			getNewDeatail(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;

	}

	.active {
		color: red;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 150rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
		// border: 1rpx black solid;
	}

	.nodata {
		display: flex;
		justify-content: center;

		image {
			width: 360rpx;
		}
	}

	.loading {
		text-align: center;
	}
</style>